#{extends 'home.html' /}
#{set title: 'Change Profile Picture'/}
<html>
<body>
	<div id = "profilePicture">
<h1> Current Profile Picture </h1>
#{if user.getPictureId() == -1}
<img src = "/public/images/missing.png" width="150px" height="150px" />
#{/if}
#{else}
<img src="@{Application.getPicture(user.id)}" width="150px" height="150px"/>
#{/else}		
</div>

<div id="newPic">
<h1> Upload a new picture </h1>
#{form @Application.uploadPicture(), enctype:'multipart/form-data'}
    <input type="file" name="picture.image" />
    <input type="hidden" name="userId" value=${user.id} />
    <input type="submit" name="submit" value="Save" />
#{/form}
</div>

<style type="text/css">
#profilePicture{
float: left;
}
#newPic{
float: right;
}
</style>
</body>
</html>